<template>
<div id="root">
  <Top><p>选择地址</p></Top>
  <van-radio-group v-model="radio">
    <van-radio v-for="(v,i) in message" :key="i" :name="i" class="xuanzhe" @click="select(v)">
      <div>
      <p><span>{{v.name}}</span> <span>先生</span> <span>{{v.phone}}</span></p>
      <p><van-tag type="warning">{{v.tag}}</van-tag> <span>{{v.address_detail}}</span></p>
    </div>
    </van-radio>
  </van-radio-group>
  <p class="add" @click="$router.push('/close/chooseAddress/addshipp')" ><van-icon name="plus" /> 新增收货地址</p>
  <router-view></router-view>
</div>
</template>

<script>
import Top from "@/components/Top";
export default {
name: "chooseAddress",
  components: {Top},
  data() {
    return {
      radio: 0,
      message:'',
    }
  },
  methods: {
    select(msg) {
      console.log(msg)
      this.$store.commit("clickdizhi",msg);
      this.$router.go(-1);
    }
  },
  created() {
    let user=JSON.parse(localStorage.user)
    this.axios.get('https://elm.cangdu.org/v1/users/'+user.user_id+'/addresses').then(data=>{
      console.log(data.data)
      this.message=data.data;
    })
  },
  beforeRouteUpdate(to,form,next){
    let user=JSON.parse(localStorage.user)
    this.axios.get('https://elm.cangdu.org/v1/users/'+user.user_id+'/addresses').then(data=>{
      console.log(data.data)
      this.message=data.data;
    });
    next();
  }
}
</script>

<style scoped>
#root{
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
background-color: white;
}
.xuanzhe{
  //display: flex;
  //align-items: center;
  border-bottom: .025rem solid #f5f5f5;
  padding: .7rem;
  line-height: 1rem;
}
.xuanzhe p{
  line-height: 30px;
}
.add{
  position: absolute;
  bottom: 50px;
  width: 100%;
  color: #3190e8;
  text-align: center;
}
</style>